<!-- src: modals/add-cabinet.components.html -->
<!-- header -S -->
<div class="modal-header">
  <h4 class="modal-title pull-left">Add Cabinet</h4>
  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<!-- header -E -->

<!-- main content -S -->
<div class="modal-body">

  <!-- loading animation -S -->
  <app-loading [loading]="loading"></app-loading>
  <!-- loading animation -E -->

  <!-- form group -S -->
  <form [formGroup]="addCabinetForm" class="add-cabinet">

    <!-- 左边机柜基本信息 -S -->
    <div class="form-input">
      <h3 class="title">General</h3>
      <div>
        <!-- 机柜标签 -S -->
        <mat-form-field class="item-size">
          <input matInput
                 placeholder="Cabinet Label"
                 maxlength="{{ v_cabinetLabel.maxNum }}"
                 required
                 formControlName="cabinetLabel">
          <!-- 错误提示 -S -->
          <mat-error>
            <app-err-msg *ngIf="addCabinetForm.controls.cabinetLabel?.touched"
                         errs="{{ addCabinetForm.controls.cabinetLabel?.errors | json }}" name="cabinet label">
            </app-err-msg>
          </mat-error>
          <!-- 错误提示 -E -->
        </mat-form-field>
        <!-- 机柜标签 -E -->

        <!-- 机柜组 -S -->
        <div class="form-group">
          <label>Cabinet Group</label>
          <select class="form-control" required  formControlName="cabinetGroup">
            <option *ngFor="let group of cabinetGroupList" [value]="group.name">{{ group.name }}</option>
          </select>
        </div>
        <!-- 机柜组 -E -->

        <!-- 机柜类型 -S -->
        <div class="form-group select-size">
          <label>Cabinet Type</label>
          <select class="form-control" required formControlName="cabinetType">
            <option *ngFor="let type of cabinetTypeList" [value]="type.id">{{ type.label }}</option>
          </select>
        </div>
        <!-- 机柜类型 -E -->

        <!-- 机柜型号 -S -->
        <mat-form-field class="item-size">
          <input matInput placeholder="Model Number" formControlName="modelNumber" maxlength="{{ v_serialNumber.maxNum }}">
          <!-- 错误提示 -S -->
          <mat-error>
            <app-err-msg *ngIf="addCabinetForm.controls.modelNumber?.touched"
                         errs="{{ addCabinetForm.controls.modelNumber?.errors | json }}">
            </app-err-msg>
          </mat-error>
          <!-- 错误提示 -E -->
        </mat-form-field>
        <!-- 机柜型号 -E -->

        <!-- 机柜序列号 -S -->
        <mat-form-field class="item-size">
          <input matInput placeholder="Serial Number" formControlName="serialNumber">
          <!-- 错误提示 -S -->
          <mat-error>
            <app-err-msg *ngIf="addCabinetForm.controls.serialNumber?.touched"
                         errs="{{ addCabinetForm.controls.serialNumber?.errors | json }}">
            </app-err-msg>
          </mat-error>
          <!-- 错误提示 -E -->
        </mat-form-field>
        <!-- 机柜序列号 -E -->
      </div>


    </div>
    <!-- 左边机柜基本信息 -E -->


    <div class="border-line"></div>

    <!-- 右边机柜属性信息 -S -->
    <div class="form-input item-size">
      <h3 class="title">Attribute</h3>
      <!-- 机柜空间 -S -->
      <mat-form-field class="item-size">
        <input matInput placeholder="Space(u)" formControlName="space" maxlength="{{ v_cabinetSpace.maxNum }}" required>
        <!-- 错误提示 -S -->
        <mat-error>
          <app-err-msg *ngIf="addCabinetForm.controls.space?.touched"
                       errs="{{ addCabinetForm.controls.space?.errors | json }}" name="cabinet space">
          </app-err-msg>
        </mat-error>
        <!-- 错误提示 -E -->
      </mat-form-field>
      <!-- 机柜空间 -E -->

      <!-- 机柜重量 -S -->
      <mat-form-field class="item-size">
        <input matInput placeholder="Weight(kg)" formControlName="cabinetWeight">
        <!-- 错误提示 -S -->
        <mat-error>
          <app-err-msg *ngIf="addCabinetForm.controls.cabinetWeight?.touched"
                       errs="{{ addCabinetForm.controls.cabinetWeight?.errors | json }}" name="cabinet weight">
          </app-err-msg>
        </mat-error>
        <!-- 错误提示 -E -->
      </mat-form-field>
      <!-- 机柜重量 -E -->

      <!-- 机柜预承载能耗 -S -->
      <mat-form-field class="item-size">
        <input matInput placeholder="Computed Power(kw)" formControlName="computedPower">
        <!-- 错误提示 -S -->
        <mat-error>
          <app-err-msg *ngIf="addCabinetForm.controls.computedPower?.touched"
                       errs="{{ addCabinetForm.controls.computedPower?.errors | json }}" name="computed power">
          </app-err-msg>
        </mat-error>
        <!-- 错误提示 -E -->
      </mat-form-field>
      <!-- 机柜预承载能耗 -E -->

      <h3 class="title-size">Sensor</h3>

      <!-- 机柜门禁IP -S -->
      <mat-form-field class="item-size">
        <input matInput placeholder="Sensor Door IP" formControlName="doorSensorIP">
        <!-- 错误提示 -S -->
        <mat-error>
          <app-err-msg *ngIf="addCabinetForm.controls.doorSensorIP?.touched"
                       errs="{{ addCabinetForm.controls.doorSensorIP?.errors | json }}" name="door sensor IP">
          </app-err-msg>
        </mat-error>
        <!-- 错误提示 -E -->
      </mat-form-field>
      <!-- 机柜门禁IP -E -->
    </div>
    <!-- 右边机柜属性信息 -E -->


  </form>
  <!-- form group -S -->

  <!-- error message -S -->
  <p *ngIf="errMsg" class="warn">{{ errMsg }}</p>
  <!-- error message -E -->

</div>
<!-- main content -E -->

<!-- footer buttons -S -->
<div class="modal-footer">
  <button mat-button (click)="bsModalRef.hide()">CANCEL</button>
  <button mat-button class="submit-btn" [disabled]="addCabinetForm.invalid" (click)="doSubmit()">ADD</button>
</div>
<!-- footer buttons -E -->


